/*通用选择器 * 通常不建议使用*/
/*
*{
    margin:0;
    padding:0;
}*/

/* id选择器 */
#main{
    color:blue;
}
/* 类选择器 */
.news_title{
    color:brown;
}
/* 元素选择器 */
h3{
    color:coral;
}
/* 属性选择器 */
[title]{
    font-size:1.5em;
}

p[data-bind]{
    color:blue;
}

p[title="abc"]{
    color:chocolate;
}

p[title~="de"]{
    color:orange;
}

p[title|="xyz"]{
    color:fuchsia;
}

a[href][title]{
    color:cadetblue;
    font-size:1.5em;
}
/* :hover用于选择鼠标悬停在元素上的状态，:active用于选择被点击的元素的状态，:focus用于选择获得焦点的表单元素的状态等 */
/* 以双冒号（::）开头，用于选择元素的特定部分或在元素之前或之后生成内容。 */
/* 伪类与伪元素选择器 */
P:hover{
    background-color: #abc;
}

li:hover{
    background-color: #fbc;
}
a{
    color:red;
}
/* 未选中 */
a:link{
    color:red;
}
/* 选中 */
a:visited{
    color:purple;
}

a:hover{
    font-weight: bold;
}
/* 鼠标点击 */
a:active{
    color:chartreuse;
}

input:focus{
    background-color: #bbc;
}

/* 父容器的第一个元素pre */
pre:first-child{
    color:red;
}

li:first-child{
    color:red;
}
/* 一个：伪类 两个：伪元素 */
div p:first-line{
    color:red;
}

div p:first-letter{
    font-weight: bold;
    font-size:200%;
}

div h1:before{
    content: "before";
}

div h1:after{
    content:"after";
}

/* 组合选择器 */
/* 后代选择器 */
div span{
    color:blueviolet;
}
/* 子选择器：直接 */
p>span{
    color:hotpink;
}
/* 相邻兄弟选择器*/
pre+span{
    color:crimson;
}
/* 普通兄弟选择器 */
pre~span.bro{
    color:forestgreen;
}


